<template>
	<NavBar icon="left" title="消费流水" />
	<view class="contain">
		<view class="bg-white header pt-4">
			<view class="flex ">
				<view class="flex-col text-center flex-1">
					<text>{{info.balance}}</text>
					<view>余额</view>
				</view>
				<view class="flex-col text-center flex-1">
					<text>{{info.historyExpense}}</text>
					<view>历史消费</view>
				</view>
			</view>
		</view>
		<view class="body bg-white rounded-2xl m-3 mt-[-4px] p-2 ">
			<view class="title   text-center ">
				消费记录
			</view>

			<view class="list">
				<view class="item flex m-2 p-2 items-center" v-for="i in info.walletRecordVoList">
					<view class="flex-col  flex-1">
						<view class="text-gray-500"> 
						<text v-if="i.expenseType === 0"> 在线余额支付订单金额</text>
						<text v-if="i.expenseType === 1"> 取消订单返还的支付金额</text>
						<text v-if="i.expenseType === 2"> 在线充值钱包余额</text>
						<text v-if="i.expenseType === 3"> 积分换余额</text>
						</view>
						<text class="text-gray-400 ">{{i.createTime}}</text>
					</view>
					<view class="text">
					<text>{{i.incDecWay? '+' : '-'}}</text> {{i.expenseAmount}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import * as api from '@/api/modules/balance_details.js'
	import useStore from '@/store/index.js'
	const info = ref({})
	const getData =async () =>{
		if(!useStore().user.userInfo.userId){
			return uni.showToast({
			title:'当前状态异常，刷新页面重新加载'
		})
		}
		const {data} = await api.wallerRecordAPI(useStore().user.userInfo.userId)
		 info.value = data
	}
	
	getData()
 
</script>

<style lang="scss">
	.contain {
		height: calc(100vh - 44px);
		background: #f2f2f2;
		border-top: 1px solid #ccc;

		.header {
			height: 18%;
			background: linear-gradient(to bottom, #2274e3, #f2f2f2);

			.flex-col {
				font-weight: 700;

				view {
					font-size: 12px;
					color: #4678f8;
				}

				text {
					color: #fc6768;
				}
			}
		}

		.body {
			height: calc(100vh - 44px - 24%);
			overflow: hidden;

			.title {
				color: #2a79e3;

				.num {
					color: #ff6666;
				}
			}

			.list {
				height: 100%;
				overflow-y: auto;

				.item {
					font-size: 12px;
					border-top: 1px solid #ebebeb;

					.text {
						color: #ff6666;
						font-size: 16px;
					}
				}
			}
		}
	}
</style>